<template>
  <div class='echartsfive' :style="{height:fullHeights+'px'}">
    <div id="echarts_five" :style="{height:fullHeight+'px'}"></div>
  </div>
</template>
<script>
  module.exports = {
    name: "echarts_five",
    data() {
      return {
        fullHeight: document.documentElement.clientHeight - 260,
        fullHeights: document.documentElement.clientHeight - 168,
        roadsectionnumlist: []
      }
    },
    mounted() {
      this.echartsdata();
    },
    methods: {
      get(url, params) {
        return new Promise((resolve, reject) => {
          axios.get('./js/echarts_four.json').then(response => {
            resolve(response);
          }).catch(err => {
            reject(err);
          })
        })
      },
      gets() {
        return new Promise((resolve, reject) => {
          axios.get('./js/hangzhou.json').then(response => {
            resolve(response);
          }).catch(err => {
            reject(err);
          })
        })
      },
      async echartsdata() {
        let myChart = echarts.init(document.getElementById('echarts_five'));
        let datas = await this.get();
        datas.data.pop()
        var rawData = [{
            name: '盘城街道',
            value: [36, 56.28, 11, 17.58, 20, 16.45]
          },
          {
            name: '葛塘街道',
            value: [30, 39.78, 13, 31.65, 8, 10.89]
          },
          {
            name: '长芦街道',
            value: [28, 42.71, 8, 13.93, 48, 32.61]
          }
        ]
        var geoCoordMap = {
          '葛塘街道': [118.71, 32.28],
          '长芦街道': [118.85, 32.26],
          '盘城街道': [118.66, 32.24]
        }
        var namearr = ['乡道路段数', '乡道里程数', '县道路段数', '县道里程数', '村道路段数', '村道里程数'];
        var colorarr = ['#1921ff', '#266eff', '#01c3dd', '#008198', '#2ef4ab',
          '#ffe074', '#ffcbcb', '#cd8425'
        ];
        let response = await this.gets()
        echarts.registerMap('nanjing', response.data);
        option = {
          top: 0,
          left: 0,
          right: 0,
          bottom: 0,
          tooltip: {
            trigger: 'axis'
          },
          geo: {
            type: 'map',
            map: 'nanjing',
            label: {
              normal: {
                show: false
              },
              emphasis: {
                show: false
              }
            },
            itemStyle: {
              normal: {
                areaColor: '#001056',
                shadowColor: '#002063',
                borderColor: "#2AB8FF",
                borderWidth: 1.3,
                shadowOffsetX: 0,
                shadowOffsetY: 10
              },
              emphasis: {
                areaColor: '#2AB8FF',
                borderWidth: 0,
                color: 'green',
                label: {
                  show: false
                }
              }
            }
          },
          series: []
        };

        function renderEachCity() {
          var options = {
            legend: [],
            xAxis: [],
            yAxis: [],
            grid: [],
            series: []
          };
          options.legend.push({
            data: namearr,
            left: '85%',
            top: '10%',
            itemWidth: 25,
            itemHeight: 15,
            textStyle: {
              color: '#ddd',
              fontSize: 15
            }
          });
          echarts.util.each(rawData, function(dataItem, idx) {
            var geoCoord = geoCoordMap[dataItem.name];
            var coord = myChart.convertToPixel('geo', geoCoord);
            idx += '';
            options.xAxis.push({
              id: idx,
              gridId: idx,
              type: 'category',
              name: dataItem.name,
              nameTextStyle: {
                color: '#fff',
                fontSize: 14
              },
              nameLocation: 'middle',
              nameGap: 3,
              splitLine: {
                show: false
              },
              axisTick: {
                show: false
              },
              axisLabel: {
                show: false
              },
              axisLine: {
                show: false,
                lineStyle: {
                  color: '#bbb'
                }
              },
              data: [dataItem.name]
            });
            options.yAxis.push({
              id: idx,
              gridId: idx,
              show: false
            });
            options.grid.push({
              id: idx,
              width: 100,
              height: 60,
              left: coord[0],
              top: coord[1],
            });
            for (var i = 0; i < namearr.length; i++) {
              options.series.push({
                name: namearr[i],
                type: 'bar',
                xAxisId: idx,
                yAxisId: idx,
                barWidth: '10%',
                itemStyle: {
                  normal: {
                    color: colorarr[i]
                  }
                },
                data: [dataItem.value[i]]
              });
            }
          });
          myChart.setOption(options);
          window.onresize = function() {
            myChart.resize();
          }
        }
        setTimeout(function() {
          renderEachCity();
        }, 1);
        myChart.setOption(option);
        window.onresize = function() {
          myChart.resize();
        }
      }
    }
  }
</script>
